<template>
  <div>
    <div class="GoodsDetail">
      <div class="GoodesTitle">
        <div class="back" @click="back">《</div>
        <div class="GoodesTitleTxt">商品信息</div>
      </div>
      <div class="GoodesBox">
        <div class="BigImg">
          <img class="BigImg" :src="commodityData.mainimg[Imgindex] | imgF" />
        </div>
        <div class="imglist">
          <div
            class="SmallImg"
            v-for="(item, index) in commodityData.mainimg"
            :key="index"
          >
            <img class="Img" @click="Imgindex = index" :src="item | imgF" />
          </div>
          <!-- <div class="SmallImg">图片</div>
          <div class="SmallImg">图片</div>
          <div class="SmallImg">图片</div> -->
        </div>
        <div class="GoodsTest">
          <div class="GoodsName">{{ commodityData.title }}</div>
          <div class="GoodsSmallTitle">
            {{ commodityData.details }}
          </div>
          <div class="jiage">
            <div class="jiageList">
              <div>价格</div>
              <div class="jiagetext">{{ commodityData.integral }}积分</div>
            </div>
            <div class="KuchunList">
              <div>
                库存
              </div>
              <div>
                {{ commodityData.stock }}
              </div>
            </div>
          </div>
          <div>数量</div>
          <div class="bottom">
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="1"
              label="描述文字"
            ></el-input-number>
            <el-button
              class="tuihuanBtn"
              @click="navigationSelect(commodityData._id)"
              >我要兑换</el-button
            >
          </div>
        </div>
      </div>
      <div class="DetailTitle">
        <div class="DetailTitleTxt">商品详情</div>
      </div>
      <div class="DetailImg">
        <div v-for="(item, index) in commodityData.textimg" :key="index">
          <img class="img" :src="item | imgF" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get_commodity } from "../../api/commodity";
import { commodity_img_prefix } from "../../utils/global";

export default {
  name: "productDetails",
  data() {
    return {
      num: 1,
      Imgindex: 0,
      commodityData: {}
    };
  },
  components: {},
  created() {
    console.log(this.$route.query);
    this.getGoods(this.$route.query);
  },
  filters: {
    imgF(val) {
      return commodity_img_prefix + val;
    }
  },
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    async getGoods(reqdata) {
      let query = {
        query: {
          ...reqdata
        }
      };
      var commodityData = await get_commodity(query);
      console.log(commodityData.data);
      this.commodityData = commodityData.data[0];
    },
    handleChange(value) {
      console.log(value);
    },
    navigationSelect(_id) {
      console.log(_id);
      this.$router.push({
        path: "/Exchange", //跳转路径
        name: "Exchange", //跳转路径的name值，不写跳转后页面取不到参数
        // 参数
        query: {
          _id: _id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
//头部
.GoodsDetail {
  .GoodesTitle {
    display: flex;
    border-bottom: 1px solid #dddddd;
    height: 80px;
    align-items: center;
    .back {
      cursor: pointer;
    }
    .GoodesTitleTxt {
      font-size: 18px;
      font-weight: 550;
      margin-left: 20px;
    }
  }
  .GoodesBox {
    display: flex;
    height: 600px;
    align-items: center;
    .BigImg {
      height: 500px;
      width: 500px;
    }
    .imglist {
      .SmallImg {
        height: 120px;
        width: 120px;
        border: solid 1px #dddddd;
        margin: 5px 10px;
        .Img {
          height: 120px;
          width: 120px;
        }
      }
    }
    .GoodsTest {
      height: 500px;
      width: 600px;
      display: flex;
      flex-direction: column;
      margin: 0 0 0 30px;
      .GoodsName {
        height: 40px;
        font-size: 28px;
        font-weight: 550;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
      }
      .GoodsSmallTitle {
        height: 70px;
        font-size: 16px;
        margin: 10px 0;
        color: #bbbbbb;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
      }
      .jiage {
        margin: 100px 0;
        display: flex;
        width: 200px;
        justify-content: space-between;
        .jiageList {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 60px;
          .jiagetext {
            color: #d43030;
          }
        }
        .KuchunList {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 60px;
        }
      }
      .bottom {
        margin: 30px 0 0 0;
        width: 440px;
        display: flex;
        justify-content: space-between;
        .tuihuanBtn {
          background-color: #1d2f70;
          color: #ffffff;
          width: 160px;
        }
      }
    }
  }
  .DetailTitle {
    border-bottom: 1px solid #dddddd;
    height: 80px;
    align-items: center;
    display: flex;
    .DetailTitleTxt {
      font-size: 18px;
      font-weight: 550;
      margin-left: 20px;
    }
  }
  .DetailImg {
    margin: 20px auto;
    width: 1000px;
    background-color: #bbbbbb;
    .img {
      width: 1000px;
    }
  }
}
</style>
